
let legend_data = ["AQI", 'CO', 'NO2', 'O3', 'PM10', 'PM2.5', 'SO2'];
let value = [100, 1.2, 134, 23, 137, 75, 22];

// 1.柱状图
let myCharts_col = echarts.init(document.querySelector(".bar1 .chart"))
let option_col;
option_col = {
    color: '#2f89cf',
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'line'
        }
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    // 修改图表大小
    grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "1%",
        containLabel: true
    },
    xAxis: {
        type: 'category',
        // data: ["AQI", 'PM2.5', 'PM10', 'SO2', 'NO2', 'O3', 'CO'],
        data: legend_data,
        axisLabel: {
            color: "rgba(255,255,255,.9)",
            fontSize: "10"
        },
        // 不显示坐标轴的样式
        axisLine:
        {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            color: "rgba(255,255,255,.9)",
            fontSize: "14"
        },
        // 不显示坐标轴的样式
        axisLine:
        {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,.1)',
                width: 2
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.1)',
            }
        }
    },
    series: [
        {
            // data: [100, 75, 137, 22, 134, 23, 1.2],
            data: value,
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
                barBorderRadius: 5
            }
        }
    ]
};
myCharts_col.setOption(option_col);


// 2.玫瑰图
let myCharts_rose = echarts.init(document.querySelector(".pie1 .chart"))
let option_rose;
option_rose = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: { show: true }
        }
    },
    series: [
        {
            name: 'Area Mode',
            type: 'pie',
            radius: ['20%', '80%'],
            center: ['50%', '50%'],
            roseType: 'area',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 14
                    }
                },
            },
            labelLine: {
                normal: {
                    length: 3
                }
            },

            itemStyle: {
                borderRadius: 5
            },
            data: [
                { value: 100, name: 'AQI' },
                { value: 75, name: 'PM2.5' },
                { value: 137, name: 'PM10' },
                { value: 22, name: 'SO2' },
                { value: 134, name: 'NO2' },
                { value: 23, name: 'O3' },
                { value: 1.2, name: 'CO' },
            ]
        }
    ]
};
myCharts_rose.setOption(option_rose);


// 3.饼图
let myCharts_pie = echarts.init(document.querySelector(".pie2 .chart"))
let option_pie;
option_pie = {
    tooltip: {
        trigger: 'item'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    legend: {
        // top: '0%',
        // left: 'center',
        orient: 'vertical',
        left: 'right',
        top: 'center',
        align: 'left',
        textStyle: {
            color: "rgba(255,255,255,.8)",
            fontSize: 12
        }
    },
    series: [
        {
            name: '传感器地区分布比例',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['20%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 11, name: '杭州' },
                { value: 2, name: '富阳' },
                { value: 3, name: '湖州' },
                { value: 3, name: '嘉兴' },
                { value: 3, name: '金华' },
                { value: 2, name: '义乌' },
                { value: 3, name: '丽水' },
                { value: 8, name: '宁波' },
                { value: 4, name: '衢州' },
                { value: 3, name: '绍兴' },
                { value: 3, name: '台州' },
                { value: 4, name: '温州' },
                { value: 3, name: '舟山' },
            ]

        }
    ]
};
myCharts_pie.setOption(option_pie);


//4.折线图
let myCharts_line = echarts.init(document.querySelector(".line2 .chart"))
let option_line;
option_line = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        show: true,
        textStyle: {
            color: "#4c9bfd",
            fontSize: 12
        }
    },
    grid: {
        left: '2%',
        right: '5%',
        bottom: '5%',
        show: true,
        borderColor: '#012f4a',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['23:00', '18:00', '19:00', '20:00', '21:00', '22:00'],
        axisLabel: {
            color: "#4c9bfd",
            fontSize: "12"
        },
        axisLine: {
            show: false,//去掉轴内间距
        },
        axisTick: {
            show: false,//去掉刻度线
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            color: "#4c9bfd",
            fontSize: "12"
        },
        axisLine: {
            show: false,//去掉轴内间距
        },
        axisTick: {
            show: false,//去掉刻度线
        },
        splitLine: {
            lineStyle: {
                color: '#012f4a'
            }
        }
    },
    series: [
        {
            name: 'AQI',
            type: 'line',
            smooth: true,
            data: [39, 38, 39, 40, 41, 41]
        },
        {
            name: 'CO',
            type: 'line',
            smooth: true,
            data: [1, 0.9, 0.9, 1, 1, 1]
        },
        {
            name: 'NO2',
            type: 'line',
            smooth: true,
            data: [30, 18, 26, 24, 29, 37]
        },
        {
            name: 'O3',
            type: 'line',
            smooth: true,
            data: [65, 115, 97, 95, 82, 65]
        },
        {
            name: 'PM10',
            type: 'line',
            smooth: true,
            data: [39, 38, 39, 40, 41, 41]
        },
        {
            name: 'PM2.5',
            type: 'line',
            smooth: true,
            data: [24, 18, 20, 23, 24, 24]
        },
        {
            name: 'SO2',
            type: 'line',
            smooth: true,
            data: [8, 7, 7, 9, 10, 9]
        }
    ]
};
myCharts_line.setOption(option_line);


//5.地图
$.get('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json', function (hZjson) {
    echarts.registerMap('杭州', hZjson);
    let myCharts_geo = echarts.init(document.querySelector(".map .chart"));
    let option_geo;

    option_geo = {
        title: {
            text: '浙江省传感器分布情况',
            x: 'center'
        },
        dataRange: {
            min: 11,
            max: 2,
            realtime: true,
            calculable: true,
            color: ['#5a8df8', '#9ec9fe', '#bee8ff'],
            textStyle: {
                color: '#fff',
                fontSize: "14"
            }
        },
        series: [
            {
                name: '传感器数量',
                type: 'map',
                map: '杭州',
                mapLocation: {
                    y: 80
                },
                label: {
                    normal: {
                        color: '#fff',
                        fontSize: "16",
                        show: true
                    },
                    emphasis: {
                        textStyle: {
                        }
                    }
                },
                data: [
                    { name: '嘉兴市', value: 3 },
                    { name: '湖州市', value: 3 },
                    { name: '杭州市', value: 11 },
                    { name: '绍兴市', value: 3 },
                    { name: '金华市', value: 3 },
                    { name: '丽水市', value: 3 },
                    { name: '温州市', value: 4 },
                    { name: '衢州市', value: 4 },
                    { name: '台州市', value: 3 },
                    { name: '宁波市', value: 8 },
                    { name: '舟山市', value: 3 },
                ]
            }
        ],

    };
    myCharts_geo.setOption(option_geo);
    window.addEventListener("resize", function () {
        myCharts_geo.resize();
    })
});


// 图标跟随屏幕自适应
window.addEventListener("resize", function () {
    // myCharts_geo.resize();
    myCharts_col.resize();
    myCharts_rose.resize();
    myCharts_pie.resize();
    myCharts_line.resize();
})

//6.7.滚动表格
$(function () {
    $('.dowebok').liMarquee({
        direction: 'up',
        scrollamount: 20,
        loop: -1
    });
});

//日历组件
laydate.render({
    elem: '#selectTime', //指定元素
    type: 'datetime'
});


//站点选择
const city = {
    hz: [1, 2, 5, 6, 7, 8, 9, 10, 11, 12, 13],
    fy: [3, 4],
    lz: [14, 15, 16],
    jx: [17, 18, 19],
    jh: [20, 21, 22],
    yw: [23, 24],
    ls: [25, 26, 27],
    nb: [28, 29, 30, 31, 32, 33, 34, 35],
    qz: [37, 38],
    sx: [39, 40, 41],
    tz: [42, 43, 44],
    wz: [45, 46, 47, 48],
    zs: [49, 50, 51]
}

function add_station_id() {
    //清除二级下拉框的信息
    let idSelect = document.getElementById("station_id");
    idSelect.innerText = ""

    //1.获取选择city的名字（value）
    let selectValue = document.getElementById("city").value;

    //2.获取选择city对应的列表
    let idElement = city[selectValue];

    //3.获取到区县后的进行遍
    for (var i = 0; i < idElement.length; i++) {
        //4.获取当前元素封装成文本节点
        var text = document.createTextNode(idElement[i]);
        //5.创建option对象
        var option = document.createElement("option");
        //6.将区、县的数据添加到option标签对象中
        option.appendChild(text);
        //7.将option放到select标签中
        idSelect.appendChild(option);
    }
}

function init() {
    //初始化方法，刷新页面时，自动选择第一个县区信息
    add_station_id();
}

$('#chaxun').click(function () {
    //获取用户选择的站点
    let myselect = document.getElementById("station_id");
    let index = myselect.selectedIndex;// selectedIndex是所选中的项的index
    let selectedId = myselect.options[index].text;
    //获取用户选择的id
    let inputTime = document.getElementById("selectTime");//获取输入框元素
    let selectedTime = inputTime.value;

    //1.主要请求
    $.ajax({
        url: "http://121.43.234.141:8080/getLastStationInfo", //要请求的后端地址
        type: "GET", //数据发送的方式(POST或者GET)
        data: { stationId: selectedId, time: selectedTime }, //需要传递的参数
        dataType: "json", //后端返回的数据格式
        success: function (result) {
            // console.log(result); //result为响应内容
            value = [];
            value.push(result[0]['aqi'], result[0]['co'], result[0]['no2'], result[0]['o3'], result[0]['pm10'],
                result[0]['pm25'], result[0]['so2'],);

            //1.更新柱状图内容
            option_col = {
                color: '#2f89cf',
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                // 修改图表大小
                grid: {
                    left: "0%",
                    top: "10px",
                    right: "0%",
                    bottom: "1%",
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    // data: ["AQI", 'PM2.5', 'PM10', 'SO2', 'NO2', 'O3', 'CO'],
                    data: legend_data,
                    axisLabel: {
                        color: "rgba(255,255,255,.9)",
                        fontSize: "10"
                    },
                    // 不显示坐标轴的样式
                    axisLine:
                    {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "rgba(255,255,255,.9)",
                        fontSize: "14"
                    },
                    // 不显示坐标轴的样式
                    axisLine:
                    {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)',
                            width: 2
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)',
                        }
                    }
                },
                series: [
                    {
                        // data: [100, 75, 137, 22, 134, 23, 1.2],
                        data: value,
                        type: 'bar',
                        barWidth: '40%',
                        itemStyle: {
                            barBorderRadius: 5
                        }
                    }
                ]
            };
            myCharts_col.setOption(option_col);

            //2.更新玫瑰图
            option_rose = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                        name: 'Area Mode',
                        type: 'pie',
                        radius: ['20%', '80%'],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 14
                                }
                            },
                        },
                        labelLine: {
                            normal: {
                                length: 3
                            }
                        },
                        itemStyle: {
                            borderRadius: 5
                        },
                        data: [
                            { value: result[0]['aqi'], name: 'AQI' },
                            { value: result[0]['pm25'], name: 'PM2.5' },
                            { value: result[0]['pm10'], name: 'PM10' },
                            { value: result[0]['so2'], name: 'SO2' },
                            { value: result[0]['no2'], name: 'NO2' },
                            { value: result[0]['o3'], name: 'O3' },
                            { value: result[0]['co'], name: 'CO' },
                        ]
                    }
                ]
            };
            myCharts_rose.setOption(option_rose);

            // 3.更新折线图
            let line_time = []
            let line_AQI = []
            let line_co = []
            let line_no2 = []
            let line_o3 = []
            let line_pm10 = []
            let line_pm25 = []
            let line_so2 = []
            for (let i = 0; i < 6; i++) {
                line_time.unshift(result[i]['time'].slice(11, 16));
                line_AQI.unshift(result[i]['aqi']);
                line_co.unshift(result[i]['co']);
                line_no2.unshift(result[i]['no2']);
                line_o3.unshift(result[i]['o3']);
                line_pm10.unshift(result[i]['pm10']);
                line_pm25.unshift(result[i]['pm25']);
                line_so2.unshift(result[i]['so2']);
            }
            option_line = {

                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    show: true,
                    textStyle: {
                        color: "#4c9bfd",
                        fontSize: 12
                    }
                },
                grid: {
                    left: '2%',
                    right: '5%',
                    bottom: '5%',
                    show: true,
                    borderColor: '#012f4a',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: line_time,
                    axisLabel: {
                        color: "#4c9bfd",
                        fontSize: "12"
                    },
                    axisLine: {
                        show: false,//去掉轴内间距
                    },
                    axisTick: {
                        show: false,//去掉刻度线
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "#4c9bfd",
                        fontSize: "12"
                    },
                    axisLine: {
                        show: false,//去掉轴内间距
                    },
                    axisTick: {
                        show: false,//去掉刻度线
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#012f4a'
                        }
                    }
                },
                series: [
                    {
                        name: 'AQI',
                        type: 'line',
                        smooth: true,
                        data: line_AQI
                    },
                    {
                        name: 'CO',
                        type: 'line',
                        smooth: true,
                        data: line_co
                    },
                    {
                        name: 'NO2',
                        type: 'line',
                        smooth: true,
                        data: line_no2
                    },
                    {
                        name: 'O3',
                        type: 'line',
                        smooth: true,
                        data: line_o3
                    },
                    {
                        name: 'PM10',
                        type: 'line',
                        smooth: true,
                        data: line_pm10
                    },
                    {
                        name: 'PM2.5',
                        type: 'line',
                        smooth: true,
                        data: line_pm25
                    },
                    {
                        name: 'SO2',
                        type: 'line',
                        smooth: true,
                        data: line_so2
                    }
                ]
            };
            myCharts_line.setOption(option_line);


            //4.动态写入表格
            $(".dowebok #tbody2").html('');
            const new_tbody = document.getElementById("tbody2");
            // console.log(new_tbody);
            new_tbody.innerHTML = '';
            let text = 0;
            for (let j = 0; j < 24; j++) {
                text = `<tr>
                <td>${result[j]['time'].slice(11, 16)}</td>
                <td>${result[j]['aqi']}</td>
                <td>${result[j]['co']}</td>
                <td>${result[j]['no2']}</td>
                <td>${result[j]['o3']}</td>
                <td>${result[j]['pm10']}</td>
                <td>${result[j]['pm25']}</td>
                <td>${result[j]['so2']}</td>
                </tr>`
                new_tbody.innerHTML += text;
            }
        },
        error: function () {
            console.log('Send Request Fail..');
        }
    });
    // 2.预警请求
    $.ajax({
        url: "http://121.43.234.141:8080/getPollutant", //要请求的后端地址
        type: "GET", //数据发送的方式(POST或者GET)
        data: { stationId: selectedId, time: selectedTime }, //需要传递的参数
        dataType: "json", //后端返回的数据格式
        success: function (result) {
            console.log(result); //result为响应内容
            value = [];
            value.push(result[0]['aqi'], result[0]['co'], result[0]['no2'], result[0]['o3'], result[0]['pm10'],
                result[0]['pm25'], result[0]['so2'],);

            // 动态写入表格
            $(".tab1 .chart #tbody1").html('');
            const new_tbody1 = document.getElementById("tbody1");
            new_tbody1.innerHTML = '';
            let text1 = 0;
            let list_length = 0;
            if (result.length > 5) {
                list_length = 5;
            } else {
                list_length = result.length
            }
            for (let k = 0; k < list_length; k++) {
                text1 = `<tr>
                <td>${result[k]['time'].slice(0, 16)}</td>
                <td>${result[k]['pollutantName']}</td>
                <td>${result[k]['value']}</td>
                <td>${result[k]['exValue']}</td>
                </tr>`
                new_tbody1.innerHTML += text1;
            }
        },
        error: function () {
            console.log('Send Request Fail..');
        }
    });
});